<!-- html代码  -->
<template>
        <div>
            <!-- 父子组件传值  -->
            <Title :title="title"></Title>
            <div ref="right1" style="height: 150px; margin-top: 15px;"></div>
        </div>
    </template>
    
    <script>
    import { G2, Line } from '@antv/g2plot';
    import { get } from '../../utils/request';
    import { mapState } from 'vuex';
    import moment from 'moment';
    
    // 注册自定义呼吸点形状
    G2.registerShape('point', 'breath-point', {
      draw(cfg, container) {
        const data = cfg.data;
        const point = { x: cfg.x, y: cfg.y };
        const group = container.addGroup();
        
        // 在特定时间点显示呼吸效果（例如14:20）
        if (data.insert_time === '14:20') {
          const decorator1 = group.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 10,
              fill: cfg.color,
              opacity: 0.5,
            },
          });
          const decorator2 = group.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 10,
              fill: cfg.color,
              opacity: 0.5,
            },
          });
          const decorator3 = group.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 10,
              fill: cfg.color,
              opacity: 0.5,
            },
          });
          decorator1.animate(
            {
              r: 20,
              opacity: 0,
            },
            {
              duration: 1800,
              easing: 'easeLinear',
              repeat: true,
            }
          );
          decorator2.animate(
            {
              r: 20,
              opacity: 0,
            },
            {
              duration: 1800,
              easing: 'easeLinear',
              repeat: true,
              delay: 600,
            }
          );
          decorator3.animate(
            {
              r: 20,
              opacity: 0,
            },
            {
              duration: 1800,
              easing: 'easeLinear',
              repeat: true,
              delay: 1200,
            }
          );
          group.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 6,
              fill: cfg.color,
              opacity: 0.7,
            },
          });
          group.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 1.5,
              fill: cfg.color,
            },
          });
        }
    
        return group;
      },
    });
    
    export default {
        data() {
            return {
                title: '湿度&噪音曲线',
                params: {
                    page: 1,
                    pageSize: 51
                },
                // 存放图表数据数组 
                chartData: [],
                // 声明图表实例
                line: null
            }
        },
        computed: {
            ...mapState(['ed'])
        },
        // 侦听器 侦听设备变化
        watch: {
            ed: {
                handler(n, o) {
                    this.params.device_id = n.device_id;
                    this.params.engineer_id = n.engineer_id;
                    // 重新查询数据 
                    this.getChartData();
                    // 更新图表数据
                    this.line && this.line.changeData(this.chartData);
                },
                deep: true
            }
        },
        methods: {
            // 封装加载图表方法
            loadLine() {
                // 创建双折线图实例
                this.line = new Line(this.$refs.right1, {
                    data: this.chartData,
                    xField: 'insert_time',
                    yField: 'value',
                    seriesField: 'type', // 区分湿度/噪音的字段
                    // 双折线颜色配置
                    color: ['#5B8FF9', '#5AD8A6'],
                    // x轴样式 
                    xAxis: {
                        label: {
                            rotate: -45,
                            style: {
                                fill: 'white'
                            }
                        }
                    },
                    // y轴字段样式
                    yAxis: {
                        label: {
                            style: {
                                fill: 'white'
                            }
                        }
                    },
                    // 图例配置
                    legend: {
                        position: 'top',
                        itemName: {
                            style: {
                                fill: 'white'
                            }
                        }
                    },
                    // 标签样式
                    label: {
                        style: {
                            fill: 'white',
                        }
                    },
                    // 设置折线图动画
                    animation: {
                        appear: {
                            animation: 'wave-in',
                            duration: 5000,
                        },
                    },
                    // 设置曲线平滑
                    smooth: true,
                    // 点配置（使用自定义呼吸点）
                    point: {
                        size: 3,
                        shape: 'breath-point',
                        style: {
                            fill: 'white',
                            stroke: ({ type }) => {
                                return type === 'humidity' ? '#5B8FF9' : '#5AD8A6';
                            },
                            lineWidth: 2,
                        },
                    },
                    // 提示框配置
                    tooltip: {
                        shared: true, // 共享提示框
                        domStyles: {
                            "g2-tooltip": {
                                backgroundColor: '#147',
                                color: 'white',
                                fontSize: 14
                            },
                            "g2-tooltip-title": {
                                color: 'white'
                            }
                        }
                    },
                    // 交互配置
                    interactions: [{ type: 'marker-active' }],
                });
                // 渲染图表 
                this.line.render();
            },
            // 封装获取图表数据方法 
            async getChartData() {
                let res = await get('/dashboard/pageQueryTodayData', this.params);
                console.log(res, '获取湿度噪音数据');
                
                // 处理原始数据
                let processedData = [];
                res.data.list.forEach((item, index, arr) => {
                    // 每隔10条选取一条
                    if (index % 10 == 0) {
                        // 格式化时间
                        const time = moment(item.insert_time).format('HH:mm');
                        
                        // 添加湿度数据点
                        processedData.push({
                            insert_time: time,
                            type: 'humidity',
                            value: item.humidity
                        });
                        
                        // 添加噪音数据点
                        processedData.push({
                            insert_time: time,
                            type: 'noise',
                            value: item.noise
                        });
                    }
                });
                
                // 设置合理的初始值
                if (processedData.length > 0) {
                    processedData[0].value = 50; // 湿度初始值
                    processedData[1].value = 40; // 噪音初始值
                }
                
                this.chartData = processedData;
            }
        },
        // 生命周期钩子
        async mounted() {
            await this.getChartData();
            this.loadLine();
        },
        // 组件销毁前清理
        beforeDestroy() {
            if (this.line) {
                this.line.destroy();
                this.line = null;
            }
        }
    }
    </script>
    
    <!-- css代码 -->
    <style lang="less" scoped></style>
    